<template>
	
	<div id="shop">
		
		<header>
			<div><img src="../../assets/shopimg/箭头.png"/></div>
			<div>
				<img src="../../assets/shopimg/fangdajing.png"/>
				<span>搜索商品</span>
			</div>
			<div><img src="../../assets/shopimg/gouwuche.png"/></div>
		</header>
		<section>
			<div class="sfenlei">
				<div class="sfen1">
					<a href="#">
						<div class="icon">
                        <img src="../../assets/shopimg/fenlei1.png"/>
					</div>
					<div class="text">
						烘焙
					</div>
					</a>
				</div>
				<div class="sfen1">
					<a href="#">
						<div class="icon">
                        <img src="../../assets/shopimg/fenlei2.png"/>
					</div>
					<div class="text">
						果蔬生鲜
					</div>
					</a>
				</div>
				<div class="sfen1">
					<a href="#">
						<div class="icon">
                        <img src="../../assets/shopimg/fenlei3.png"/>
					</div>
					<div class="text">
						器具
					</div>
					</a>
				</div>
				<div class="sfen1">
					<a href="#">
						<div class="icon">
                        <img src="../../assets/shopimg/fenlei4.png"/>
					</div>
					<div class="text">
						领券
					</div>
					</a>
				</div>
				<div class="sfen1">
					<a href="#">
						<div class="icon">
                        <img src="../../assets/shopimg/fenlei5.png"/>
					</div>
					<div class="text">
						方便食品
					</div>
					</a>
				</div>
				<div class="sfen1">
					<a href="#">
						<div class="icon">
                        <img src="../../assets/shopimg/fenlei6.png"/>
					</div>
					<div class="text">
						进口食品
					</div>
					</a>
				</div>
				<div class="sfen1">
					<a href="#">
						<div class="icon">
                        <img src="../../assets/shopimg/fenlei7.png"/>
					</div>
					<div class="text">
						时令鲜食
					</div>
					</a>
				</div>
				<div class="sfen1">
					<a href="#">
						<div class="icon">
                        <img src="../../assets/shopimg/fenlei8.png"/>
					</div>
					<div class="text">
						全部分类
					</div>
					</a>
					
				</div>
			</div>
			<div class="shaodian">
				<span class="icon1">好店推荐</span>
				<div class="szhekou" v-if="tuijian">
					<div class="stu" v-for="i in tuijian">
						<img :src="i.picurl"/><br />
					    <span>{{i.name}}</span><br />
					    <span>￥{{i.price}}</span><br />
					    <span>{{i.promo_text}}</span><br />
					</div>
				</div>
			</div>
			<div class="sremen">
				<span class="icon1">热门推荐</span>
				<div class="hengtu">
					<img src="../../assets/shopimg/renmen.png"/>
					<img src="../../assets/shopimg/renmen.png"/>
					<img src="../../assets/shopimg/renmen.png"/>
					<img src="../../assets/shopimg/renmen.png"/>
					<img src="../../assets/shopimg/renmen.png"/>
					<img src="../../assets/shopimg/renmen.png"/>
					<img src="../../assets/shopimg/renmen.png"/>
					<img src="../../assets/shopimg/renmen.png"/>
				</div>
				<div class="shutu" v-if="shopList">
					<div class="sren" v-for="items in shopList">
						<span class="span1">{{items.ad_info.title_1st}}</span>
						<span class="span2">{{items.ad_info.title_2nd}}</span>
						<div class="little"></div>
						<img :src="items.ad_info.pic_url"/>
					</div>
				</div>
				<div class="sjfen" v-if="shopRequest" >
					<div class="sjfen1" v-for="item in shopRequest">
						<img :src="item.picurl"/><br/>
						<span class="mianshu">{{item.name}}</span>
						<span class="miaoshu2">[{{item.foreword}}]</span>
						<span class="jiaqian">￥{{item.price}}</span>
						<span class="shouliang">已售{{item.total_sales_volume}}</span>
					</div>
				</div>
				<div class="sbiao">
					<div class="biao-left">
						<div class="biaohang">
						<span>烤箱</span>
						<span>淡奶油</span>
						</div>
						<div class="biaohang">
						<span>锅</span>
						<span>黄油</span>
						</div>
						<div class="biaohang">
						<span>餐具</span>
						<span>厨师机</span>
						</div>
						<div class="biaohang">
						<span>模具</span>
						<span>芝士</span>
						</div>
						<div class="biaohang">
						<span>便当</span>
						<span>蛋挞皮</span>
						</div>
					</div>
					<div class="biao-right">
						<img src="../../assets/img/jianguo.png"/>
					    <span class="mianshu">三顿半|第二代精品冷萃奶萃咖啡套装 带滤泡杯</span>
						<span class="miaoshu2">[akjhdjsdhahd]</span>
						<span class="jiaqian">￥59</span>
						<span class="shouliang">已售234</span>
					</div>
				</div>
			</div>
		</section>
	</div>
	
</template>

<script>
	export default{
		data(){
			return{
				shopList:[],
				shopRequest:[],
				tuijian:[]
			}
		},
		methods:{
			shopreq(){
				this.$http({
					url: '/shopreq',
					method:'GET'
				}).then(function(req){
//					console.log(req.data.content.slot_deliveries[1].current_deliveries);
					this.shopList = req.data.content.slot_deliveries[1].current_deliveries;
				});
			},
			shoprequest(){
				this.$http({
					url: '/shoprequest',
					method:'GET'
				}).then(function(req){
					console.log(req.body);
					this.shopRequest = req.body;
				});
			},
			shoptui(){
				this.$http({
					url: '/tuijian',
					method:'GET'
				}).then(function(req){
					console.log(req.body.content);
					this.tuijian = req.body.content;
				});
			}
		},
		mounted(){
			this.shopreq(),
			this.shoprequest(),
			this.shoptui()
		}
	}
</script>

<style>
	#shop{
		position: relative;
		height: 100%;
	}
	header{
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		height: 1.682692rem;
		color: #fff;
		font-size: 0.355769rem;
		line-height: 1.682692rem;
		text-align: center;
		display: flex;
	}
	header div{
		flex-grow: 1;
		position: relative;
		top: 0.240384rem;
	}
	
	header div:nth-of-type(1) img{
		width: 1.701923rem;
	}
	header div:nth-of-type(2){
		width: 6.980769rem;
		height: 1.201923rem;
		text-align: center;
		color: #a1a19c;
		background: #f2f2f0;
		font-size: 0.365384rem;
		border-radius: 0.048076rem;
		position: relative;
		top: 0.125rem
	}
	header div:nth-of-type(2) img{
		width: 0.548076rem;
		position: relative;
	     right: 0.278846rem;
	      top: -0.0615rem
	}
	header div:nth-of-type(2) span{
	     position: relative;
	    
	     bottom: 0.188461rem;
	     
	     
	}
	header div:nth-of-type(3) img{
		width: 1.701923rem;
	}
	section{width: 100%;
    position: absolute;
    top: 1.682692rem;
    
    overflow-y: scroll;
    bottom: 0;
		
	}
	.sfenlei{
		height: 5.76923rem;
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		text-align:center ;	
		border-bottom:solid 0.009615rem #EAEAE0 ;
	}
	.sfenlei .sfen1{
		width: 25%;
		text-align: center;
		padding-top: 0.701923rem;
		
	}
	.sfenlei .sfen1 img{
		width: 0.884615rem;
		height: 0.942307rem;
	}
	.sfenlei a{
		color: black;
		font-size: 0.365384rem;
	}
	.shaodian{
		height: 6.576923rem;
	}
	.shaodian .icon1{
		font-size: 0.39423rem;
		font-weight: 700;
	}
	.shaodian .szhekou{
		text-align: center;
		display: flex;
		flex-wrap: wrap;
	}
	.shaodian .szhekou .stu{
		width: 33%;
	}
	.shaodian .szhekou img{
		width: 2.884615rem;
	}
	.sremen .icon1{
		font-size: 0.39423rem;
		font-weight: 700;
	}
	.sremen .hengtu{
		height: 3.298076rem;
		width: 100%;
		white-space: nowrap;
		overflow-x: scroll;
	}
	.sremen .hengtu img{
		width: 2.951923rem;
		padding-left: 0.096153rem;
	}
	.sremen .shutu{
		position: relative;
		top: 1.5rem;
		text-align: center;
	}
	.sremen .shutu img{
		padding-top: 0.192307rem;
		width: 100%;
	}
	.sren{
		position: relative;
	}
	.span1{
		width:80%;
		position: absolute;
		top: 1.538461rem;
		left: 0.721153rem;
		font-size:0.576923rem;
		font-weight: 700;
		color: white;
		/*margin-bottom:0.096153rem;*/
	}
	.span2{
		width:80%;
		position: absolute;
		top: 3.26923rem;
		left: 0.721153rem;
		font-size:0.432692rem;
		font-weight: 400;
		color: white;
	}
	.sjfen {
		width: 100%;
		position: relative;
		display: flex;
		top: 1.923076rem;
		text-align: center;
		display: flex;
		flex-wrap: wrap;
		margin-bottom:0.096153rem;
	}
	.sjfen img{
		width: 4.51923rem;
	}
	.sjfen span{
		display: block;
		padding-left: 0.384615rem;
		width: 4.51923rem;
	}
	.sjfen div{
		flex-grow: 2;
		
	}
	.sjfen1{
		height:7.015384rem;
	}
	.sjfen .jiaqian{
		position: absolute;
		text-align: left;
		color: red;
	}
	.sjfen .shouliang{
		position: absolute;
		text-align: right;
		color: #95958f;
	}
	.sjfen .miaoshu2{
		color: #95958f;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
		margin-top:0.192307rem;
		margin-bottom:0.192307rem;
	}
	.sbiao{
		width: 100%;
		position: relative;
		display: flex;
		top: 1.923076rem;
		text-align: center;
		height: 7.692307rem;
	}
	.sbiao div{
		flex-grow: 1;
	}
	.sbiao .biao-left{
		
		width: 4.615384rem;
		height: 7.307692rem;
		background-color: #f2f2f2;
		margin-left:0.538461rem ;
		margin-right: 0.192307rem;
		border: #95958F;
	}
	.biao-left .biaohang{
		width: 4.615384rem;
	}
	.biaohang span{
		display: block;
		width: 2.3rem;
		float: left;
		height: 1.538461rem;
		line-height: 1.538461rem;
		font-size: 0.384615rem;
		border-bottom: 0.009615rem solid #C1C1BD;
	}
	.biaohang span:nth-of-type(1){
		border-right:0.009615rem solid #C1C1BD ;
	}
	.sbiao .biao-right{
		height: 7.5rem;
		
	}
	.biao-right img{
		width:4.615384rem;
	}
	.biao-right span{
	display: block;
    ;
    width: 4.51923rem;
	}
	.biao-right .jiaqian{
		position: absolute;
		text-align: left;
		color: red;
	}
	.biao-right .shouliang{
		position: absolute;
		text-align: right;
	color: #95958f;
	}
</style>